<template>
  <div>
    <Header></Header>
    <div class="youer-container">
      <div class="hudongketang" style="position:relative;">
        <div style="width:160px;text-align:center;font-size:16px;color:#000;position:absolute;right:0;top:-50px;">
          <img src="/images/qrcode/youer.png" alt="" style="width:120px;height:120px;">
          <p>扫一扫生成产品</p>
          <p>相关图文介绍文档预览</p>
        </div>
        <div class="title title-long">
          <h2>幼儿音乐互动课堂</h2>
          <p>CHILDREN'S MUSIC INTERACTIVE CLASS</p>
        </div>
        <div class="ketang-cont">
          <div class="ketang-text">
            <p>针对不同的教学硬件，可通过触控技术、遥控器或鼠标进行课件操作。</p>
            <p>课程内容从儿童音乐基础到各大院校音乐基础知识考级，引导孩子们掌握视唱、练耳、乐理、音乐常识等基础音乐知识，提升孩子的综合音乐素养，同时也为器乐、声乐的学习打下良好基础。</p>
          </div>
        </div>
      </div>
      <div class="shezhi">
        <div class="shezhi-title">
          <h3>课程设置</h3>
        </div>
        <div class="shezhi-cont">
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi1.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程时长</h4>
            </div>
            <div class="shezhi-explain">
              <p>45-50分钟/课时</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi2.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>适合群体</h4>
            </div>
            <div class="shezhi-explain">
              <p>3.5-8岁学龄学生</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi3.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程形式</h4>
            </div>
            <div class="shezhi-explain">
              <p>集体课，配置小打类乐器的乐团课</p>
            </div>
          </div>
        </div>
      </div>
      <div class="kechengtese">
        <div class="title">
          <h2>课程特色</h2>
          <p>COURSE CHARACTERISTICS</p>
        </div>
        <div class="tese-cont">
          <div class="tese-item">
            <div class="tese-num">
              <span>01</span>
            </div>
            <div class="tese-img">
              <img src="/images/youer/kecheng1.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>先进教学法</h4>
              <p>新颖独创的模块式教学，通过听、唱、学、玩、动五大内容模块，在不同的教学场景中充分将音乐的专业性、趣味性传递给学生。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>02</span>
            </div>
            <div class="tese-img">
              <img src="/images/youer/kecheng2.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>教师操作模式多样</h4>
              <p>可以选择蓝牙遥控器方式、触摸屏方式、鼠标+键盘方式进行教学，保证教师在教室内的任何方位，都可以方便快捷的操作课程，提高上课的效率以及师生交互的水平。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>03</span>
            </div>
            <div class="tese-img">
              <img src="/images/youer/kecheng3.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>独创的课程模板</h4>
              <p>通过节奏唱名、诗词诵唱、知识童谣、趣味游戏四大课程板块，带领孩子全面打造基础音乐知识体系</p>
            </div>
          </div>
        </div>
      </div>
      <div class="kechenghuanjie">
        <div class="title">
          <h2>课程环节</h2>
          <p>COURSE CHARACTERISTICS</p>
        </div>
        <div class="huanjie-cont">
          <div class="huanjie-item">
            <div class="huanjie-img">
              <img src="/images/youer/chang.png" alt="">
            </div>
            <div class="huanjie-text">
              <p>通过听节奏、听旋律、听音乐特征等训练孩子的音乐听觉。</p>
            </div>
            <div class="huanjie-type">
              <p>唱</p>
            </div>
          </div>
          <div class="huanjie-item">
            <div class="huanjie-img">
              <img src="/images/youer/ting.png" alt="">
            </div>
            <div class="huanjie-text">
              <p>通过模唱、视唱、歌唱等方式让孩子学习如何表达音乐。</p>
            </div>
            <div class="huanjie-type">
              <p>听</p>
            </div>
          </div>
          <div class="huanjie-item">
            <div class="huanjie-img">
              <img src="/images/youer/xue.png" alt="">
            </div>
            <div class="huanjie-text">
              <p>通过学习乐理知识、音乐常识让孩子了解更多的音乐知识。</p>
            </div>
            <div class="huanjie-type">
              <p>学</p>
            </div>
          </div>
          <div class="huanjie-item">
            <div class="huanjie-img">
              <img src="/images/youer/wan.png" alt="">
            </div>
            <div class="huanjie-text">
              <p>通过互动式的音乐小游戏让孩子在快乐中学习和巩固知识。</p>
            </div>
            <div class="huanjie-type">
              <p>玩</p>
            </div>
          </div>
          <div class="huanjie-item">
            <div class="huanjie-img">
              <img src="/images/youer/dong.png" alt="">
            </div>
            <div class="huanjie-text">
              <p>通过身体律动解放孩子的天性，让他们全身心地感受音乐。</p>
            </div>
            <div class="huanjie-type">
              <p>动</p>
            </div>
          </div>
        </div>
      </div>
      <div class="jiaoshi">
        <div class="title">
          <h2>教室案例</h2>
          <p>COMPANY NEW CENTER</p>
        </div>
        <div class="jiaoshi-cont">
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/youer1.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/youer2.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/youer3.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/youer4.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
  head () {
    return {
      title: '幼儿音乐互动课堂-河南酷音智能科技有限公司'
    }
  },
  data() {
    return {}
  },
  components: {
    Header, Footer
  }
}
</script>

<style lang="less" scoped>
.youer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  &::after {
    content: '';
    width: 182px;
    height: 12px;
    background: url(/images/youer/titlebg.png) no-repeat;
    position: absolute;
    top: 65px;
  }

  &.title-long {

    &::after {
      width: 464px;
      background: url(/images/youer/titlebg_long.png) no-repeat;
    }
  }

  h2 {
    font-size: 36px;
    color: #000;
  }

  p {
    margin-top: 30px;
    font-size: 18px;
    color: #959595;
  }
}
.hudongketang {
  margin-top: 115px;

  .ketang-cont {
    width: 1200px;
    height: 264px;
    margin-top: 70px;
    background: url(/images/youer/ketangbg.png) no-repeat;
    overflow: hidden;

    .ketang-text {
      width: 880px;
      margin-top: 90px;
      margin-left: 270px;
    }

    p {
      font-size: 18px;
      color: #000;
      line-height: 2
    }
  }
}
.shezhi {
  margin-top: 120px;

  .shezhi-title {
    text-align: center;
    margin-bottom: 60px;

    h3 {
      font-weight: normal;
      font-size: 30px;
      color: #000;
      letter-spacing: 2px;
    }
  }

  .shezhi-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .shezhi-item {
    width: 276px;
    height: 276px;
    margin: 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #31b1eb;

    .shezhi-img {
      display: flex;
      height: 140px;
      align-items: center;
    }

    h4 {
      font-size: 26px;
      color: #00a0e9;
    }

    .shezhi-explain {
      padding: 0 25px;
    }

    p {
      margin-top: 17px;
      font-size: 22px;
      color: #000;
    }
  }
}
.kechengtese {
  margin-top: 120px;

  .tese-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tese-item {
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin-bottom: 65px;
    padding: 35px 40px 35px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;

    &:last-child {
      margin: 0;
    }
  }

  .tese-num {
    flex-shrink: 0;

    span {
      display: inline-block;
      width: 55px;
      height: 65px;
      border-radius: 6px;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-size: 24px;
      background: #5ac1ef;
    }
  }

  .tese-img {
    flex-shrink: 0;
    width: 270px;
    height: 175px;
    margin-left: 45px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tese-explain {
    margin-left: 45px;

    h4 {
      font-weight: normal;
      font-size: 24px;
      color: #00a0e9;
    }

    p {
      margin-top: 20px;
      font-size: 18px;
      color: #000;
      line-height: 36px;
    }
  }
}
.kechenghuanjie {
  width: 1190px;
  margin: 120px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .huanjie-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .huanjie-item {
    width: 215px;
    margin: 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    .huanjie-img {
      display: flex;
      justify-content: flex-end;
      height: 82px;

      img {
        width: auto;
        height: auto;
      }
    }

    .huanjie-text {
      display: flex;
      // justify-content: center;
      height: 210px;
      padding: 35px 25px 0;
      margin: 25px 0 0;
      border: 2px solid #96ddff;

      p {
        font-size: 18px;
        text-align: left;
        letter-spacing: 2px;
        line-height: 36px;
      }
    }

    .huanjie-type {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #96ddff;

      p {
        text-align: center;
        font-size: 26px;
        color: #024369;
      }
    }
  }
}
.jiaoshi {
  margin: 120px auto 110px;

  .jiaoshi-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .jiaoshi-item {
    margin: 0 25px;

    img {
      width: 258px;
      height: 258px;
    }
  }
}
</style>
